$(function () {
	
	load ();  //每次进来都先获取本地存储数据，先渲染页面
	
	/*  1、首先给我们输入框添加键盘事件,必须有内容才可以添加*/
	$('#addTxt').on('keydown', function (ev) {
		if (ev.keyCode == 13) {
			if ($(this).val().indexOf(' ') != 0 && $(this).val().length != 0) {
				/*点击之后，先确认原先有没有保存*/
				var local = getData ();
				//console.log(local)
				/*更新本地存储*/
				local.push({title : $(this).val(), todo : false}); 
				/*重新保存进去*/
				saveData(local);
				/*获取数据，渲染页面*/
				load ();
				/*清空文本框*/
				$(this).val('');
			} else {
				alert('请输入内容');
			}
			
		} 
	});
	
	/* 2、 点击删除按钮*/
	$('.todo-list,.done-list').on('click','span', function () {
		/*获取数据*/
		var data = getData();
		/*修改数据*/
		var index = $(this).attr('id');/*先获取对应触发事件，可以获取他的下标，通过我们自定义的下标获取，自定义的用attr获取*/
		/*因为我们获取的是一个数组对象，所以通过splice（i,length）这个方法可以删掉我们要删的*/
		data.splice(index,1);   //splice(下标，删除长度)
		/*重新保存*/
		saveData(data);
		/*重新渲染页面*/
		load();
	})
	
	/* 3、 正在进行和已完成的选项操作*/
	$('.todo-list,.done-list').on('click', 'input', function () {
		/*获取数据*/
		var data = getData();
		/*修改数据*/
		/*老规矩，获取对应触发点的下标，这里由于它与删除按钮是兄弟，所以采用这种方法获取，不用重新定义下标*/
		var index = $(this).siblings('span').attr('id');
		/*把我们对应数据里面的done改变，根据复选框状态来*/
		/*attr获取自定义属性，prop获取固有属性*/
		data[index].todo = $(this).prop('checked');
		console.log(data[index].todo)
		/*重新保存数据*/
		saveData(data);
		/*重新加载数据*/
		load();
		
	});
	
	
	/*获取本地存储信息函数封装*/
	function getData () {
		/*获取本地存储的信息*/
		var data = localStorage.getItem('todolist');
		/*判断原先有没有内容，有的话返回，没有则返回一个数组*/
		if (data != null) {
			/*由于存储的是字符串，所以需要转格式*/
			return JSON.parse(data);
		} else {
			/*没有则返回一个空数组*/
			return [];
		}
	}
	
	/*更新本地存储信息*/
	function saveData (data) {
		/*更新就是重新保存一遍数据而已*/
		/*只能保存字符串形式，所以利用JSON.stringify转型*/
		localStorage.setItem('todolist',JSON.stringify(data));
	}
	
	/*从本地获取数据，渲染页面*/
	function load () {
		/*获取数据*/
		var data = getData();
		/*数据渲染之前，先把页面之前渲染的数据清空掉*/
		$('.todo-list,.done-list').empty();
		/*定义两个变量，来存储待办事项和已完成事项的条数*/
		var todoNum = 0;  //每次都是0，然后重新计算
		var doneNum = 0;
		/*遍历数据，有几条，就生成几个节点来渲染页面*/
		$.each(data, function (i, item) {
			console.log(item.title);
			/*判断我们要添加到哪一个去*/
			if (item.todo) {
				/*创建一个li节点*/
				/*ps : 当我们点击删除按钮时，对应节点要删除，所以我们通过给按钮自定义一个id，来绑定按钮与li*/
				var li = '<li><input type="checkbox" checked = "checked" /><p>'+item.title+'</p><span id =' + i +'>-</span></li>';
				/*添加进节点里*/ 
				$('.done-list').prepend(li);
				/*ps: 这里一定要给复选框加一个checked，才可以*/
				/*数值记录*/
				doneNum++;
			} else {
				/*创建一个li节点*/
				/*ps : 当我们点击删除按钮时，对应节点要删除，所以我们通过给按钮自定义一个id，来绑定按钮与li*/
				var li = '<li><input type="checkbox" /><p>'+item.title+'</p><span id =' + i +'>-</span></li>';
				/*添加进节点里*/ 
				$('.todo-list').prepend(li);
				todoNum++;
			}
		});
		/*渲染数值*/
		$('.todo').children('span').text(todoNum);
		$('.done').children('span').text(doneNum);
	}
	
})
